<template>
  <div class="audio-box">
    <!-- 读条区域 -->
    <div class="article" @click="startDate" ref="article">
      <!-- <div class="article-children" ref="article"></div> -->
    </div>
    <audio :src="url" ref="audio" @ended="switchMusic
" @pause="paused"></audio>
    <div class="audio-keys">
      <ul class="ul-box">
        <li class="name">{{musicNames}}</li>
        <li>
          <ul class="ul-keys">
            <li class="iconfont" @click="isShowRandom">
              <!-- 随机播放 -->
              <span v-if="isRandom">&#xe6a0;</span>
              <!-- 顺序播放 -->
              <span v-else>&#xe658;</span>
            </li>
            <!-- 上一曲 -->
            <li class="iconfont" @click="inSong">&#xe6e1;</li>
            <!-- 播放暂停区域 -->
            <li class="iconfont" @click="isShowPlay">
              <!-- 点击在暂停 -->
              <span v-if="isPlay">&#xe616;</span>
              <!-- 点击播放 -->
              <span v-else>&#xea82;</span>
            </li>
            <!-- 下一曲 -->
            <li class="iconfont" @click="nextSong">&#xe718;</li>
          </ul>
        </li>
        <!-- 声音 -->
        <li class="iconfont voice" @click="isShowVoice" ref="voice">
          <!-- 静音 -->
          <span v-if="isVoice">&#xeca9;</span>
          <!-- 有声音 -->
          <span v-else>&#xe8b8;</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 暂停播放
      isPlay: false,
      // 随机顺序播放
      isRandom: false,
      //
      isVoice: false,
      timeid: ''
    }
  },
  methods: {
    ...mapMutations(['addIndex', 'ductionIndex', 'getDataIndex', 'getMusicListName', 'getMusicListName2']),
    isShowRandom () {
      this.isRandom = !this.isRandom
    },
    // 播放暂停
    isShowPlay () {
      // 判断src是否存在url不存在则不往下走
      if (!this.$refs.audio.currentSrc) {
        console.log(1)
        this.isPlay = false
        return
      }
      // 存在  取反
      this.isPlay = !this.isPlay
      console.log(this.isPlay)
      // 判断是否是播放或者暂停
      this.isPlay ? this.$refs.audio.play() : this.$refs.audio.pause()
      // 配置article的width
      // this.$refs.article.style.width = '10px'
      // 计数器 实现进度条
      this.timeId = setInterval(() => {
        // 获取歌曲总当前时长
        const timeStart = this.$refs.audio.currentTime
        // 获取歌曲总时长
        const timeEnd = this.$refs.audio.duration
        // 计算出当前歌曲到的百分比
        const timePercentage = (timeStart / timeEnd) * 100
        // 将获取到的百分比与article的width关联
        this.$refs.article.style.backgroundSize = timePercentage + '%'
      }, 10)
    },
    // 声音是否是静音
    isShowVoice () {
      if (this.isVoice) {
        this.$refs.audio.muted = false
        console.log(this.$refs.audio)
        this.isVoice = false
      } else {
        this.$refs.audio.muted = true
        console.log(this.$refs.audio)
        this.isVoice = true
      }
    },
    // 点击播放
    play () {
      // 加载后再区执行以下函数
      this.$nextTick(() => {
        // 播放
        this.$refs.audio.play()
        // 将按钮转成播放键
        this.isPlay = true
        // 配置article的width
        // this.$refs.article.style.width = '10px'
        // 计数器 实现进度条
        this.timeId = setInterval(() => {
          // 获取歌曲总当前时长
          const timeStart = this.$refs.audio.currentTime
          // 获取歌曲总时长
          const timeEnd = this.$refs.audio.duration
          // 计算出当前歌曲到的百分比
          const timePercentage = (timeStart / timeEnd) * 100
          // 将获取到的百分比与article的width关联
          this.$refs.article.style.backgroundSize = timePercentage + '%'
        }, 10)
      })
    },
    // 读条点击切换时间
    startDate (targer) {
      // 获取当前点击的位置
      const items = targer.offsetX
      // 将点击的位置换算成占比
      const width = items / 1200
      // 获取当前音乐的时间总值
      const article = parseInt(this.$refs.audio.duration)
      // 获取点击地方的时间总之的百分比
      const time = article * width
      // 将获取到的时间总值的百分比赋值给currentTime
      this.$refs.audio.currentTime = time
    },
    // 上一曲
    async inSong () {
      // 判断当前的index不能小于0
      if (this.index > 0) {
        // 调用vuex中的ductionIndex方法
        this.ductionIndex()
        // 通过得到的id获取当前的url
        const { data: res } = await this.$http.get('song/url?id=' + this.musicDataList[this.index].id)
        // 将获取到的url通过commit传递给vuex再通过vuex获取到当前的url
        this.$store.commit('getUrl', res.data[0].url)
        // 调用播放方法
        this.play()
        // 将当时的音乐名给getMusicListName
        this.getMusicListName(this.musicDataList[this.index].musicName)
        // 将当前的歌手名给getMusicListName2
        this.getMusicListName2(this.musicDataList[this.index].musicSinger)
      }
    },
    // 下一曲
    async nextSong () {
      if (!this.$refs.audio.currentSrc) {
        console.log(1)
        return
      }
      // 判断是否是随机
      if (this.isRandom) {
        // 获取当前的随机数
        const index = parseInt(Math.random() * this.musicDataList.length)
        // 将随机数赋值给getDataIndex
        this.getDataIndex(index)
        // 获取当前的url
        const { data: res } = await this.$http.get('song/url?id=' + this.musicDataList[this.index].id)
        // 将当前的url赋值给url
        this.$store.commit('getUrl', res.data[0].url)
        // 播放
        this.play()
        // 将当时的音乐名给getMusicListName
        this.getMusicListName(this.musicDataList[this.index].musicName)
        // 将当前的歌手名给getMusicListName2
        this.getMusicListName2(this.musicDataList[this.index].musicSinger)
      } else {
        // 调用加加方法
        this.addIndex()
        // 获取当前的url
        const { data: res } = await this.$http.get('song/url?id=' + this.musicDataList[this.index].id)
        // 将当前的url赋值给getUrl
        this.$store.commit('getUrl', res.data[0].url)
        // 播放
        this.play()
        // 将当时的音乐名给getMusicListName
        this.getMusicListName(this.musicDataList[this.index].musicName)
        // 将当前的歌手名给getMusicListName2
        this.getMusicListName2(this.musicDataList[this.index].musicSinger)
      }
    },
    // 播放结束后下一首歌
    switchMusic () {
      // 调用nextSong方法
      this.nextSong()
    },
    // 音乐暂停后执行的事件
    paused () {
      clearInterval(this.timeId)
      this.isPlay = false
    }
  },
  computed: {
    // 获取vuex中的数据
    ...mapState(['url', 'musicDataList', 'musicId', 'index']),
    musicNames () {
      return this.musicDataList[this.index].musicName
    }
  },
  watch: {
    // 监控src中的url值是否发生变化 发生变化则调用play方法
    url () {
      // 判断用户是否点击了播放键
      console.log(this.$refs.audio.paused)
      if (this.isPlay) {
        this.play()
      }
    }
  }
}
</script>

<style scoped>
.audio-box {
  position: relative;
  width: 1200px;
  height: 100px;
  color: #000;
  background-color: #1f2531;
}
.audio-keys {
  height: 100%;
}
.iconfont {
  color: #aeb2bb;
}
.name {
  color: #aeb2bb;
  font-size: 20px;
}
.ul-box {
  position: relative;
  display: flex;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
}
li {
  cursor: pointer;
  height: 100%;
  line-height: 100px;
}
.voice {
  position: absolute;
  right: 0;
}
.ul-keys {
  display: flex;
  position: absolute;
  align-items: center;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}
.ul-keys li {
  margin-left: 30px;
}
.article {
  position: absolute;
  width: 1200px;
  height: 6px;
  transform: translateY(-100%);
  cursor: pointer;
  background-image: linear-gradient(to right, yellow, pink);
  background-size: 0 100%;
  background-repeat: no-repeat;
}
li:hover {
  color: aqua;
}
</style>
